<template>
    <div>
        <Form :model="formItem" :label-width="300" label-position="right">
            <Card :bordered="false" style="background:#fff;padding: 20px;width: 60vw; ">
                <p slot="title">巡店设置</p>

                <div v-for="(item, index) in formItem.cp_time" :key="index">
                    <FormItem label="巡店名称：">
                        <Input v-model="item.code_zw" class="FormItemInput" disabled></Input>
                    </FormItem>

                    <FormItem label="单次巡店时间：">
                        <div style="margin-bottom:10px">
                            <TimePicker v-model="item.start_time" format="HH:mm" class="FormItemInput inline" placeholder="开始时间" disabled></TimePicker>
                            至
                            <TimePicker v-model="item.end_time" format="HH:mm" class="FormItemInput inline" placeholder="结束时间" disabled></TimePicker>

                            <!-- <Icon v-if="index < formItem.xd.length-1" @click="delSeting(index,'xd')" color="red" size="25" type="ios-remove-circle-outline" style="font-weight: 700;" />

                            <span v-else>
                                <Icon @click="delSeting(index,'xd')" v-show="index !== 0" color="red" size="25" type="ios-remove-circle-outline" style="font-weight: 700;" />
                                <Icon @click="addSeting('xd')" color="#2d8cf0" size="25" type="ios-add-circle-outline" style="font-weight: 700;" />
                            </span> -->
                        </div>
                    </FormItem>
                </div>

                <hr />

                <FormItem label="常用语：">
                    <div v-for="(item, index) in formItem.cp_desc_use_words" :key="index" style="margin-bottom:10px">
                        <Input v-model="formItem.cp_desc_use_words[index]" class="FormItemInput" placeholder="请输入不超过10字的内容"></Input>
                        <Icon v-if="index < formItem.cp_desc_use_words.length-1" @click="delSeting(index,'cyy')" color="red" size="25" type="ios-remove-circle-outline" style="font-weight: 700;" />

                        <span v-else>
                            <Icon @click="delSeting(index,'cyy')" v-show="index !== 0" color="red" size="25" type="ios-remove-circle-outline" style="font-weight: 700;" />
                            <Icon @click="addSeting('cyy')" color="#2d8cf0" size="25" type="ios-add-circle-outline" style="font-weight: 700;" />
                        </span>
                    </div>
                </FormItem>
                <Button type="primary" class="sure_btn" @click="save">保存</Button>
            </Card>
        </Form>

    </div>
</template>
<script>
    import {
        mapMutations
    } from 'vuex'
    import axios from '@/libs/api.request'
    export default {
        data() {
            return {


                // 巡店设置对象
                formItem: {}
            }
        },
        methods: {

            // 获取巡店设置列表
            getCheckSetList() {
                axios.ajax_post('admin-conf-ajax_get_patrol', {}).then(res => {
                    if (res.data.code === 1) {
                        this.formItem = res.data.data.patrol_info
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

            // 添加
            addSeting(name) {
                // if (name == 'xd') {
                //     this.formItem.xd.push({
                //         name: '',
                //         start_time: '',
                //         end_time: ''
                //     })
                //     return false
                // }
                this.formItem.cp_desc_use_words.push('')

            },

            // 删除
            delSeting(index, name) {
                // if (name == 'xd') {
                //     this.formItem.xd.splice(index, 1)
                //     return false
                // }
                this.formItem.cp_desc_use_words.splice(index, 1)
            },

            // 保存
            save() {
                let data = {
                    cp_time: this.formItem.cp_time,
                    cp_desc_use_words: this.formItem.cp_desc_use_words
                }
                axios.ajax_post('admin-conf-ajax_save_patrol', data).then(res => {
                    if (res.data.code === 1) {
                        this.$Notice.success({
                            title: res.data.msg,
                            duration: 3
                        })
                        this.getCheckSetList()
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })

            }
        },
        created() {
            this.getCheckSetList()
        }
    }
</script>
<style lang="less" scoped>
    .FormItemInput {
        width: 20vw;

        &.inline {
            width: 9vw;
            margin-right: 10px;

            &:nth-of-type(2n) {
                margin-right: 0;
                margin-left: 10px;
            }
        }
    }

    hr {
        height: 1px;
        background-color: #cee;
        border: none;
        margin-bottom: 30px;
    }

    .sure_btn {
        display: block;
        margin: 0 auto;
        width: 10vw;
    }
</style>